import React, { Component } from 'react';
import {Input, Button, Col, } from 'antd';

import './SearchBar.less';

export default class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            input_value:"",
        };
    }

    handleClick(e) {
        alert(this.state.input_value);
    }

    handleinput_value (e) {
       let value = e.target.value;
       this.setState({input_value: value});
    }

  render() {
    return (
        <div className="row-search">
            <Col span={24}>
                <article>
                    <h1>云市场</h1>
                    <Input.Search placeholder="搜索服务" onChange={(event)=>{this.handleinput_value(event)}} />
                    <Button id="searchInput" ref="searchInput" className="btn-search" size="large" type="primary" onClick={(e)=>{this.handleClick(e)}}>搜索</Button>
                    <Button size="large" ghost>发布定制需求</Button>
                    <Button size="large" ghost>服务发布</Button>
                    <Button className="btn-rool" size="large" ghost>云市场服务发布规则</Button>
                </article>
            </Col>
        </div>
    )
  }
}